<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户昵称">
                <a-input v-model="queryParam.name" placeholder="请输入用户昵称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.phone" placeholder="请输入手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="onPageSearch">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <UserManage :queryParam="queryParam" ref="userManage" v-show="currentTab == 'userManage'"></UserManage>
      <!-- <IntegralRecharge
        :queryParam="queryParam"
        ref="integralRecharge"
        v-show="currentTab == 'integralRecharge'"
      ></IntegralRecharge> -->
      <!-- <MoneyRecharge
        :queryParam="queryParam"
        ref="moneyRecharge"
        v-show="currentTab == 'moneyRecharge'"
      ></MoneyRecharge> -->
      <!-- <div slot="tabBarExtraContent">
        <a-space class="table-operator">
          <a-button type="primary" style="margin-bottom: 0px" @click="onExport" icon="plus">批量导出</a-button>
        </a-space>
      </div> -->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import UserManage from './components/List'
import IntegralRecharge from './components/IntegralRechargeRecord'
import MoneyRecharge from './components/MoneyRechargeRecord'
export default {
  components: {
    UserManage,
    IntegralRecharge,
    MoneyRecharge
  },
  props: {},
  data() {
    return {
      queryParam: {
        // type: 'type',
        name: '',
        phone: ''
      },
      currentTab: 'userManage'
    }
  },
  computed: {},
  watch: {
    currentTab(val) {
      this.$nextTick(() => {
        this.$refs[val].$refs.table.refresh(true)
      })
    }
  },
  methods: {
    onPageSearch() {
      this.$nextTick(() => {
        this.$refs[this.currentTab].$refs.table.refresh(true)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.card_top_padding {
  background: #fff;
  margin-bottom: 11px;
  padding: 24px;
  // display: inline-block;
}
</style>
